<template>
 
  <view class="backg">
 
    <view class="demo-layout_item">
      <u--text :text="data.brokerName" align="center" color="#782c28" size="30"></u--text>
      <u--text :text="'成交' + data.actualCashflow + '元'" align="center" lineHeight="60" size="40" color="#cd100a" :bold="true"></u--text>
      <u--text :text="data.createTime" align="center" color="#b4b4b4" size="15"></u--text>
    </view>
    <canvas canvas-id="fireworksCanvas" class="canvas" style="width: 100vw; height: 100vh;"></canvas>
	<!-- <audio src="https://img.tukuppt.com/newpreview_music/08/99/99/5c88f1f326eb812526.mp3" autoplay loop></audio> -->
  </view>
</template>

<script>
	import { getLast } from '@/api/tidings/index.js';
	
	export default {
	  data() {
	    return {
	      data: {
			  audioPaused: false
		  },
	      width: 0,
	      height: 0,
	      fireworks: [],
	      particles: [],
	      fireworkTimer: null,
	      animationFrameTimer: null,
		  innerAudioContext:null
	    };
	  },
	  async onShow() {
		this.playMuisc(true);//自动播放
	    await this.getLast();
	    this.initCanvas();
	  },
	  onHide() {
	    this.clearCanvas();
	    clearInterval(this.fireworkTimer);
	    clearTimeout(this.animationFrameTimer);
		this.playMuisc(false);
	  },
	  onBackPress() {
		this.playMuisc(false);		
	    this.clearCanvas();
	    clearInterval(this.fireworkTimer);
	    clearTimeout(this.animationFrameTimer);
	
	    return false;
	  },
	  methods: {
	    async getLast() {
	      const res = await getLast();
	      this.data = res.data.data;
	    },
	    initCanvas() {
	      const systemInfo = uni.getSystemInfoSync();
	      this.width = systemInfo.windowWidth;
	      this.height = systemInfo.windowHeight;
	      
	      this.fireworks = [];
	      this.particles = [];
	
	 
	      this.createFirework(this.width / 2, this.height, this.randomTargetX(), this.randomTargetY());
	
 
	      this.fireworkTimer = setInterval(() => {
	        this.createFirework(this.width / 2, this.height, this.randomTargetX(), this.randomTargetY());
	      }, 400); // 0.4秒创建一个 
	
	      this.animate();
	    },
	    clearCanvas() {
	      const context = uni.createCanvasContext('fireworksCanvas');
	      context.clearRect(0, 0, this.width, this.height);
	      context.draw();
	    },
	    randomTargetX() {
	      return Math.random() * this.width;
	    },
	    randomTargetY() {
	      return Math.random() * this.height / 2;
	    },
	    randomColor() {
	      const r = Math.floor(Math.random() * 256);
	      const g = Math.floor(Math.random() * 256);
	      const b = Math.floor(Math.random() * 256);
	      return `rgba(${r},${g},${b},`;
	    },
	    createFirework(sx, sy, tx, ty) {
	      const firework = {
	        x: sx,
	        y: sy,
	        sx: sx,
	        sy: sy,
	        tx: tx,
	        ty: ty,
	        distanceToTarget: Math.sqrt(Math.pow(tx - sx, 2) + Math.pow(ty - sy, 2)),
	        angle: Math.atan2(ty - sy, tx - sx),
	        speed: 2,
	        acceleration: 1.05,
	        color: this.randomColor(),
	        targetRadius: 1,
	      };
	      this.fireworks.push(firework);
	    },
	    createParticles(x, y, color) {
	      let particleCount = 100;
	      while (particleCount--) {
	        const particle = {
	          x: x,
	          y: y,
	          radius: Math.random() * 2 + 1,
	          speed: Math.random() * 5 + 2,
	          angle: Math.random() * Math.PI * 2,
	          color: color,
	          alpha: 1,
	          decay: Math.random() * 0.02 + 0.01,
	        };
	        this.particles.push(particle);
	      }
	    },
	    drawFireworks(context) {
	      let index = this.fireworks.length;
	      while (index--) {
	        const firework = this.fireworks[index];
	        context.beginPath();
	        context.arc(firework.x, firework.y, firework.targetRadius, 0, Math.PI * 2);
	        context.setFillStyle(`${firework.color}1)`);
	        context.fill();
	
	        const vx = Math.cos(firework.angle) * firework.speed;
	        const vy = Math.sin(firework.angle) * firework.speed;
	        firework.x += vx;
	        firework.y += vy;
	
	        firework.speed *= firework.acceleration;
	
	        if (firework.distanceToTarget < firework.speed) {
	          this.createParticles(firework.tx, firework.ty, firework.color);
	          this.fireworks.splice(index, 1);
	        }
	      }
	    },
	    drawParticles(context) {
	      let index = this.particles.length;
	      while (index--) {
	        const particle = this.particles[index];
	        context.beginPath();
	        context.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
	        context.setFillStyle(`${particle.color}${particle.alpha})`);
	        context.fill();
	
	        particle.x += Math.cos(particle.angle) * particle.speed;
	        particle.y += Math.sin(particle.angle) * particle.speed;
	        particle.alpha -= particle.decay;
	
	        if (particle.alpha <= particle.decay) {
	          this.particles.splice(index, 1);
	        }
	      }
	    },
	    animate() {
	      const context = uni.createCanvasContext('fireworksCanvas');
	      context.clearRect(0, 0, this.width, this.height);
	      this.drawFireworks(context);
	      this.drawParticles(context);
	      context.draw();
	
	      this.animationFrameTimer = setTimeout(this.animate, 6); // ~60 FPS
	    },
		playMuisc(flag) {
			   
			   if(this.innerAudioContext==null){
				   this.innerAudioContext = uni.createInnerAudioContext();
			   }
			  if(flag){
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.src = 'https://dabinhouse-1320826375.cos.ap-shanghai.myqcloud.com/down/fire.mp3';
				this.innerAudioContext.onPlay(() => {
				  console.log('开始播放');
				});
				this.innerAudioContext.onError((res) => {
				  console.log(res.errMsg);
				  console.log(res.errCode);
				}); 
				  
			  }else{
				  this.innerAudioContext.stop()
				  this.innerAudioContext.destroy()
			  }

		}
	  },
	};
	</script>

</script>
<style lang="scss" scoped>
.backg {
 
  width: 100%;
  height: 100vh;
  background: url("../../../static/tidings/bage.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: #990709;
  display: inline-block;
  position: relative;
 
  .demo-layout_item {
    margin-top: 900rpx;
	 
  }
}

.canvas {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  z-index: 9999;
}
</style>
